import React, { Fragment, useEffect, useState } from 'react'
import { Swiper, Tabs } from 'antd-mobile'
import Nav from '../../components/Nav.jsx'
import Container from '../../components/Container.jsx'
import { getNews } from '../../api/home'
import './Homes.css'


const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
        <div
            className="content"
            style={{ background: color }}
        // onClick={() => {
        //   Toast.show(`你点击了卡片 ${index + 1}`)
        // }}
        >
            {index + 1}
        </div>
    </Swiper.Item>
))

export default function Homes() {
    const [list, setList] = useState([])
    useEffect(() => {
        getNews().then(res => {
            setList(res.data)
            console.log(res.data)
        })
    }, [])
    return (
        <Fragment>
            <Swiper indicator={() => null}>{items}</Swiper>
            {/* Nav */}
            <Nav />
            {/* 新闻资讯 */}
            <Container>
                <Tabs>
                    {
                        list.map(item => {
                            return <Tabs.Tab title={ item.name } key={ item._id?item._id: 'all' }>
                                {
                                    item.news_list.map(items => {
                                        return <li className='tabs_li' key = { items._id }>
                                            [{ items.cate_name }]: 
                                            <div>
                                                { items.title }
                                            </div>
                                             &nbsp; { items.date }
                                        </li>
                                    })
                                }
                            </Tabs.Tab>
                        })
                    }
                    {/* <Tabs.Tab title='水果' key='fruits'>
                        菠萝
                    </Tabs.Tab>
                    <Tabs.Tab title='蔬菜' key='vegetables'>
                        西红柿
                    </Tabs.Tab>
                    <Tabs.Tab title='动物' key='animals'>
                        蚂蚁
                    </Tabs.Tab> */}
                </Tabs>
            </Container>
        </Fragment>
    )
}
